<template>
<div class="m-page">
    <div v-if="isGroup">
        <div class="m-cardlist">
            <div class="group" v-for="group in datas" :key="group[groupKey]">
                <el-tag class="grouptag" :closable="!readonly && ifDeleteGroup" type="info" @close="deleteGroupData(group[groupKey])">{{group[groupName]}}</el-tag>
                <div class="list">
                    <el-tag v-for="item in group.children" :key="item[valueName]" :closable="!readonly" effect="plain" size="small"
                        @close="deleteData(item[valueName])">{{item[labelName]}}</el-tag>   
                </div>
            </div>
        </div>
    </div>
    <div v-else class="m-cardlist">
        <el-tag v-for="item in datas" :key="item[valueName]" :closable="!readonly" effect="plain" size="small" 
        @close="deleteData(item[valueName])">{{item[labelName]}}</el-tag>
    </div>
</div>
</template>
<script>
/** 组件功能：分组标签列表
* 传入：props
* 输出：[{labelName,valueName,groupKey,groupName,...},...]
* 事件：v-model,change，单个删除delete，删除一组deleteGroup
*/
export default {
    props:{
        labelName:{ type: String, default: 'name'}, //labelName
        valueName:{ type: String, default: 'id'}, //valueName
        groupKey:{ type: String, default: 'comId'}, //分组ID
        groupName:{ type: String, default: 'comName'}, //分组名称
        value:{ type: Array, default:()=>{return []}}, //初始化数据
        isGroup:{ type: Boolean, default: false}, //是否分组
        readonly:{ type: Boolean, default: false }, //是否可编辑
        ifDeleteGroup:{type: Boolean, default: true}, //是否可以删除一组数据
    },
    data(){
        return {
            datas:[],
        };
    },
    watch:{
        value(val){
            this.datas = this.isGroup?this.groupList(val):val;
        }
    },
    mounted(){
        this.datas = this.isGroup?this.groupList(this.value):this.value;
    },
    methods:{
        //1.数据分组
        groupList(arr){
            return arr.reduce((t, v, i) => {
                let findIndex = [].concat(t).findIndex(e => e[this.groupKey] === v[this.groupKey])
                if ( findIndex > -1) {
                    t[findIndex].children = t[findIndex].children.concat([v])
                } else {
                    t.length += 1
                    t[t.length - 1] = {}
                    t[t.length - 1][this.groupKey] = v[this.groupKey]
                    t[t.length - 1][this.groupName] = v[this.groupName]
                    t[t.length - 1].children = [].concat([v])
                }
                return t
            }, [])
        },
        //2.删除单个数据
        deleteData(id){
            let obj = this.value.find(item => item[this.valueName]==id);
            let list = this.value.filter(item => item[this.valueName]!=id);
            this.$emit('input',list);
            this.$emit('change',list);
            this.$emit('delete',obj);
        },
        //3.删除分组数据
        deleteGroupData(id){
            let list = this.value.filter(item => item[this.groupKey]!=id);
            let delList = this.value.filter(item => item[this.groupKey]==id);
            this.$emit('input',list);
            this.$emit('change',list);
            this.$emit('deleteGroup',delList);
        },
    },
};
</script>
<style lang="less" scoped>
@import "~@/assets/style/base.css";
.m-cardlist{width:100%;position:relative;margin-left:-5px;line-height:1;
    .el-tag{margin-left:5px;margin-top:5px;}
    .el-tag.grouptag{max-width:400px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
}
</style>